@import "./variables.scss";
@import "./sidebar.scss";
@import "~element-ui/packages/theme-chalk/src/common/var";
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
}

a {
  text-decoration: none;
  color: $--color-primary;
}

.scroll-container {
  background-color: #000;
}

// 内联输入框
.inline-input .el-form-item__content {
  display: flex;
}

.view-dialog > .el-dialog {
  min-width: 1000px !important;
}

// 动态参数行
$dynColWidth: 130px;

.dyn-col {
  width: $dynColWidth !important;
  height: 34px;
  text-align: right;
  padding-right: 10px;
  display: inline-block;
}

.row {
  width: calc(100% - 130px) !important;
  display: inline-block;

  .col-5 {
    width: calc((100% - 20px - 40px) / 3);
    & + .col-5 {
      margin-left: 10px;
    }
  }
  .col-4 {
    width: calc((100% - 30px - 40px) / 4);
    & + .col-4 {
      margin-left: 10px;
    }
  }
}

// 实际上计算的是容器下同类元素
.row:not(:nth-child(2)) {
  margin-left: $dynColWidth;
}

#app {
  width: 100%;
  height: 100%;
}

[size="small"] input[type="text"] {
  height: 30px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px !important;
}
.el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  min-height: 34px;
}
.el-form-item--small .el-form-item__error {
  position: relative;
}

.el-loading-mask {
  background-color: rgba(0, 0, 0, 0.6) !important;
}
/*列表loading*/

.el-table {
  .el-loading-mask {
    background-color: transparent !important;
    i {
      font-size: 30px;
    }
  }
}

.history-tab {
  margin-bottom: 0 !important;
}

.el-menu {
  border: none !important;
}
/*表单页面*/

.form-wrap .form-list .el-form-item__content {
  display: flex;
}

.case-center-view-form {
  .el-form-item__label {
    width: 120px !important;
  }
  .el-input.is-disabled .el-input__inner {
    background-color: #fff; // border-color: #FFF;
    color: #606266;
    cursor: auto;
  }
} //历史记录
// .history-tab {
//   .el-tabs__content {
//     overflow: inherit;
//     position: static;
//   }
//   .el-tabs__item {
//     color: inherit;
//   }
//   .el-tabs__header {
//     margin-bottom: 0;
//   }
//   .el-tabs__item:first-child {
//     width: 62px;
//     text-align: center;
//     padding-left: 0 !important;
//     padding-right: 0 !important;
//   }
//   .el-tabs__item:first-child .el-icon-close {
//     display: none;
//   }
//   .el-tabs__new-tab {
//     display: none;
//   }
// }
.collection-history {
  .el-tabs__content {
    display: none;
  }
}

.search-container {
  .el-form-item__label {
    width: 120px !important;
  }
}

.user-info {
  .custom-form {
    .el-form-item__label {
      width: 120px !important;
    }
    .el-form-item__content {
      margin-left: 120px !important;
    }
  }
}
/*权限菜单*/

.custom-tree {
  /*第一层*/
  .el-tree-node {
    /*第二层*/
    .el-tree-node__children {
      /*第三层*/
      .el-tree-node {
        /*最后一层*/
        .el-tree-node__children {
          display: flex;
          .el-tree-node + .el-tree-node {
            .el-tree-node__content {
              padding-left: 6px !important;
            }
          }
        }
      }
    }
  }
}
/*菜单*/

.el-menu--collapse .el-menu {
  min-width: 200px;
  margin-left: 0 !important;
}

.touch-ripple {
  position: absolute;
}

.el-menu li {
  box-shadow: 0 1px 1px rgba(252, 250, 250, 0.1);
  position: relative;
} //菜单颜色 第二级
.el-menu--dark > li > ul > li .el-submenu__title:hover {
  background-color: #617792;
} //菜单颜色 第三级
.el-menu--dark .el-submenu .el-menu .el-menu-item:hover {
  background: #728ead;
}
/*标题*/

.seach-title {
  cursor: default;
  margin-top: 10px;
  padding: 10px 6px;
  font-size: 14px;
  background: #fff;
  box-shadow: 1px 0 4px rgba(252, 250, 250, 0.3);
}

.el-tabs__header {
  margin-bottom: 0;
}
/*隐藏历史记录首页关闭按钮*/

.el-tabs__item:first-child .el-icon-close {
  display: none;
}

.m-title {
  margin: 10px 0;
}

.m-row {
  display: flex;
  align-items: center;
  height: 60px;
  background-color: #f9fafc;
  border: 1px solid #eaeefb;
}

.tc {
  text-align: center;
}

.fv-center {
  justify-content: center;
}

.w30per {
  width: 30%;
}

.w100per {
  width: 100%;
}

.w200px {
  width: 200px !important;
}

.w300px {
  width: 300px !important;
}

.pl10 {
  padding-left: 10px;
}

.pl20 {
  padding-left: 20px;
}

.m10 {
  margin: 10px 0;
}

.m20 {
  margin: 20px 0;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb40 {
  margin-bottom: 40px;
}

.ml20 {
  margin-left: 20px;
}
.mc {
  color: $--color-primary;
}
.mr20 {
  margin-right: 20px;
} // 模态框标题样式重置
.el-dialog > .el-dialog__header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
} // 详情行样式
.view-list {
  // 列样式
  .el-col {
    line-height: 30px;
    font-size: 14px;
    margin-left: 20px;
    color: #99a9bf;
    font-weight: 400;
    &:nth-child(odd) {
      text-align: right;
      color: #5e6d82;
    }
  } // 查看详情行样式
  .el-row {
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
  }
}

$w60px: 60px;
$w80px: 80px;
$w120px: 120px;
$w150px: 150px;
$w160px: 160px;
$w180px: 180px;
$w190px: 190px;
@mixin calcLabel($wLabel) {
  .row > .col:nth-child(odd) {
    width: $wLabel;
  }
  .row > .col:nth-child(even) {
    // 160px---左边label宽度   40px---行左右边距   20px---值内容的左边距
    width: calc(100% - #{$wLabel} - 40px - 20px);
  }
  .col-2 > .col:nth-child(even) {
    width: calc(50% - #{$wLabel} - 20px - 20px);
  }
  .col-3 > .col:nth-child(even) {
    width: calc(33.3333% - #{$wLabel} - 13px - 20px);
  }
}

.list-label-60px {
  @include calcLabel($w60px);
}

.list-label-80px {
  @include calcLabel($w80px);
}

.list-label-120px {
  @include calcLabel($w120px);
}

.list-label-150px {
  @include calcLabel($w150px);
}

.list-label-160px {
  @include calcLabel($w160px);
}

.list-label-180px {
  @include calcLabel($w180px);
}

.list-label-190px {
  @include calcLabel($w190px);
}

.detail-list {
  .row {
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
    width: 100%;
    font-size: 0; // 单列
    & > .col {
      // 列公共样式
      display: inline-block;
      cursor: default;
      line-height: 30px;
      font-size: 14px;
      color: #99a9bf;
      font-weight: 400;
      vertical-align: top;
      word-wrap: break-word; // 奇数列样式
      &:nth-child(odd) {
        text-align: right;
        color: #5e6d82;
      } // 偶数列左边距
      &:nth-child(even) {
        margin-left: 20px;
      }
    }
  }
}
/**重置分页样式**/

.el-pagination {
  text-align: right;
  padding: 15px 0 !important;
}
/**调整详情弹出窗内的列表样式**/

.dialog-container {
  .el-col {
    line-height: 30px;
    font-size: 14px;
    color: #99a9bf;
    font-weight: 400;
    &:nth-child(odd) {
      text-align: right;
      color: #5e6d82;
    }
  }
}
/**带输入的弹出框**/

.dialog-edit-container {
  .el-col {
    padding-bottom: 10px;
  }
}

.el-dialog div {
  cursor: default;
}
/*查询表单样式*/

/*查询表单样式*/
.query-form {
  // border: 1px solid #cfdbe2;
  border-bottom: 1px dashed #cfdbe2;

  background-color: #fff;
  //padding-top: 22px;

  // padding-left: 20px;
  // padding-bottom: 1px;
}
 //自定义穿梭框
.custom-transfer {
  .el-checkbox {
    display: block;
    margin-left: 0 !important;
  }
}


.search-container {
  .el-input__inner {
    max-width: $searchInWidth;
    width: $searchInWidth;
    &.el-date-editor{
      width: 350px;
      max-width: 350px;
    }
  }
  
  & > form.el-form--inline > .el-form-item {
    margin-bottom: 8px !important;
    margin-right: 0;
  }
  & > .el-form--inline .el-form-item {
    margin-right: 8px;
  }
  // & > .el-form .el-date-editor {
  //     width: auto;
  // }
  // & > .el-form .picker-item-x .el-date-editor {
  //     & > .el-input__inner {
  //         width: 118px !important;
  //         max-width: 118px !important;
  //     }
  // }
  .el-form-item > .el-form-item__content {
    & > .el-date-editor.el-range-editor {
      //  width: $searchInWidth;;
      // display: flex;
      // flex-direction: column;
      // padding: 0;
      // & > .el-icon-time, & > .el-icon-date {
      //     display: none;
      // }
      // & > .el-range-separator {
      //     display: none;
      // }
      // & > .el-range-input {
      //     &:nth-child(2) {
      //         border-bottom: 1px dotted rgba(220, 223, 230, .8) !important;
      //     }
      //     cursor: pointer;
      //     box-sizing: border-box;
      //     padding: 0 15px;
      //     height: 16px;
      //     line-height: 16px;
      //     text-align: left;
      //     width: 100%;
      //     font-size: 10px;
      //     background-color: transparent;
      // }
      // .el-range__close-icon {
      //     position: absolute;
      //     top: 7px;
      //     right: 0;
      // }
    }
  }
  // .el-range-editor.el-input__inner {
  //   padding: 0px 4px;
  //   .el-input__icon {
  //     width: 18px;
  //   }
  // }
  // .el-date-editor .el-range__close-icon {
  //   width: 10px !important;
  // }
}
/*改变滚动条样式*/

::-webkit-scrollbar-track-piece {
  background: #fff;
  -webkit-border-radius: 3px;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb {
  height: 20px;
  background-color: #999;
  -webkit-border-radius: 5px;
  outline: 2px solid #fff;
  outline-offset: -2px;
  border: 2px solid #fff;
}

::-webkit-scrollbar-thumb:hover {
  height: 20px;
  background-color: #666;
  -webkit-border-radius: 5px;
} //设置颜色标签
.set- {
  @mixin setColor($color) {
    background-color: $color !important;
    border-color: $color !important;
    color: #fff !important;
    cursor: pointer;
    margin-right: 10px;
  }
  &no {
    @include setColor(#fff);
    color: #000 !important;
  }
  &red {
    @include setColor(#f00);
  }
  &yellow {
    @include setColor(#ff0);
    color: #999 !important;
  }
  &blue {
    @include setColor(#00f);
  }
  &green {
    @include setColor(#0f0);
  }
}

//时间组件样式重置
.el-time-spinner.has-seconds .el-time-spinner__wrapper {
  width: 33% !important;
}

//重置表格样式
.el-table--small td,
.el-table--small th {
  padding: 0 !important;
}
td .cell,
th .cell {
  word-break: keep-all !important;
  white-space: nowrap !important;
}

.el-table th {
  background: #fafafa !important;
  //padding: 6px 0 !important;
}